<template>
  <div
    class="status-container"
    @click="$emit('click')"
  >
    <div class="status-title">
      <span>{{ title }}</span>
      <el-tooltip
        v-if="tips"
        style="margin-right: auto;margin-left: 0.3rem;"
        :content="tips"
        placement="top"
      >
        <i class="el-icon-warning-outline" />
      </el-tooltip>
      <div
        v-if="destination"
        style="cursor: pointer;"
        @click="$emit('navigate')"
      >
        <i
          v-if="!destinationName"
          class="el-icon-location-outline"
        />
        <span
          v-else
          style="color:#3F9EFF;font-weight: 500; font-size: 11px;"
        >{{ destinationName }}</span>
      </div>
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    destination: {
      type: Boolean,
      default: false
    },
    destinationName: {
      type: String,
      default: ''
    },
    tips: {
      type: String,
      default: ''
    }
  },
  emits: ['navigate', 'click']
}
</script>

<style lang="scss" scoped>
.status-container {
  border: 0.8px solid #ebeef5;
  border-radius: 5px;
  width: 100%;
  overflow: hidden;
  height: 100%;

  .status-title {
    padding: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    background: linear-gradient(90deg, #ecf4ff, #fff)
  }

  .content {
    padding: 5px;
    height: 100%;
  }
}
</style>
